<template>
<div 
    class="theme-background-bt" 
    @click.stop="onSetUp">
    <i class="el-icon-lollipop"></i>
</div>
</template>

<script>
//设置主题按钮组件
export default {
    props:{
        background:{
            type:String,
            default:'',
        },
    },
    computed:{
        theme:{
            get(){
                return this.$store.state.theme;
            },
            set(value){
                this.$store.commit(
                    'setUpTheme',
                    {
                        background:value,
                    },
                );
            },
        },
    },
    methods:{
        onSetUp(){ //设置主题背景颜色
            if(!this.background) return;
            this.theme = this.background;
        },
    },
}
</script>
<style lang="scss" scoped>
.theme-background-bt{
    width: fit-content;
    font-size: 1.8rem;
    background-color: rgba(0,0,0,.1);
    padding: 5px;
    line-height:100%;
    color: #ffffff;
    transition: all 0.2s;
    cursor: pointer;
    letter-spacing: 1px;
    border-radius: 3px; 
    display: flex;
    align-items: center;
    &:hover{
        background-color: rgba(0,0,0,.2);
    }
}
</style>

